<template>
	<view>
		<!-- <view v-if="children && children.length>0">
			<view v-for="(item,index) in children">
				<view>
					{{item['任务名称']}}
					<a @click="editTask(index)">编辑</a>
					<a @click="deleteTask(index)">删除</a>
				</view>
			</view>
		</view> -->
		<view class="info" :class="{'margin': isMargin}">
			<view v-if="isNoEmpty">
				<view  class="info-item" @click="goDetail(index)" v-for="(item,index) in children" :key="item.id">
					<view v-if="item['任务名称']">
						<view>
							<view class="info-wrap">任务名称：{{item['任务名称']}}</view>
							<view class="info-wrap">任务优先级：{{taskLevelObj[item['任务优先级']]}}</view>
							<view class="info-wrap">开始日期：{{item['开始日期'] | formatTime}}</view>
							<view class="info-wrap">结束日期：{{item['结束日期'] | formatTime}}</view>
						</view>
						<view class="arrow"></view>
						<view v-if="isShowDelete" class="delete" @click.stop="onDelete(index)">删除</view>
					</view>
				</view> 
			</view>
			<view v-else class="empty">暂无子任务</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		props: {
			children: {
				type: Array,
				default: () => []
			},
			isShowDelete: {
				type: Boolean,
				default: true
			},
			isMargin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				taskLevelObj: this.$type.taskLevelObj
			};
		},
		methods: {
			goAdd() {
				this.$emit('add')
			},
			goDetail(index) {
				this.$emit('detail', index)
			},
			onDelete(index) {
				this.$emit('delete', index)
			}
		},
		computed: {
			isNoEmpty() {
				let flag = this.children.some(item => item['任务名称'])
				return flag
			}
		}
	}
</script>

<style lang="scss">
.info {
	margin-left: 16rpx;
	font-size: 28rpx;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	.empty {
		// width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 174rpx;
		color: #999;
	}
	.info-item {
		position: relative;
		margin-bottom: 10rpx;
		box-shadow: 0px 1px 6rpx 0px #EEEEEE;
		// border-bottom: 2rpx solid #eee;
		.info-title {
			margin-bottom: 20rpx;
		}
		.info-wrap {
			line-height: 50rpx;
			padding-left: 18rpx;
		}
		.arrow {
			position: absolute;
			top: 90rpx;
			right: 50rpx;
			width: 20rpx;
			height: 20rpx;
			border-top: 2rpx solid #333;
			border-right: 2rpx solid #333;
			transform: rotate(45deg);
		}
		.delete {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			text-align: center;
			line-height: 45rpx;
			width: 90rpx;
			height: 45rpx;
			font-size: 24rpx;
			color: #E57544;
			border: 2rpx solid #E57544;
		}
	}
}
.margin {
	margin-left: -20rpx;
}
</style>
